<template>
  <swiper class="home-swiper">
    <swiper-item v-for="(item, index) in banners" :key="'banner' + index">
      <!-- <a :href="item.link"> -->
      <img v-lazy="item.image" alt @load="imagesLoad" />
      <!-- </a> -->
    </swiper-item>
  </swiper>
</template>

<script>
import { Swiper, SwiperItem } from "components/common/swiper";

export default {
  name: "HomeSwiper",
  // 组件注册
  components: {
    Swiper,
    SwiperItem,
  },
  // 接收父组件传递数据
  props: {
    banners: {
      type: Array,
      // 数组默认值必须是一个函数 内部返回一个空数组
      default() {
        return [];
      },
    },
  },
  // 组件方法
  methods: {
    imagesLoad() {
      // 因为当前事件是为了计算高度的, 所以只要触发一次即可, 在父组件中监听事件时添加.once修饰符
      this.$emit("swiperImageLoad");
    },
  },
};
</script>

<style lang="less" scoped>
.home-swiper {
  height: 200px;
  overflow: hidden;
}
</style>